<script lang="ts" setup>
import LogoImg from '@/assets/main/logo.png'
import newImg from '@/assets/main/new.png'
import fixImg from '@/assets/main/fix.png'
import optimizationImg from '@/assets/main/optimization.png'
import { queryUpgradeLog } from '@/api/system'
import { getToken } from '@/utils/cache/cookies'
import { queryUpgradeLogResponseData } from '@/api/system/types/system'
import { computed, onMounted, ref } from 'vue'

const data = ref<queryUpgradeLogResponseData[]>([])
const getData = () => {
  queryUpgradeLog({
    token: getToken() ?? ''
  }).then((res) => {
    if (res.statusCode === '0') {
      data.value = res.data
    }
  })
}
onMounted(() => {
  getData()
})

const formatType = computed(() => {
  return (type: 'Feature' | 'Fix' | 'Optimization') => {
    switch (type) {
      case 'Feature':
        return '新功能'
      case 'Fix':
        return '修复'
      case 'Optimization':
        return '优化'
      default:
        break
    }
  }
})
const handleShrink = (index: number) => {
  const timelist = document.querySelectorAll('.ant-timeline.ant-timeline-label')
  const list = timelist[index].children
  for (let index = 0; index < list.length; index++) {
    if (index == 0) continue
    const element = list[index]
    element.classList.toggle('collapse')
  }
}
</script>

<template>
  <div class="xy-container">
    <a-timeline mode="left" v-for="(yearData, index) in data" :key="index">
      <a-timeline-item>
        <template #label>
          <span class="text-[36px] text-primary year-label" @click="handleShrink(index)"
            >{{ yearData.year }}年</span
          >
        </template>
        <template #dot>
          <img v-if="index === 0" :src="LogoImg" alt="" w-55 h-55 style="font-size: 59px" />
        </template>
        <span class="text-[36px] text-primary">小鱼换电客服更新日志</span>
      </a-timeline-item>
      <a-timeline-item v-for="(item, index) in yearData.data" :key="index">
        <template #label>
          <div flex flex-col>
            <span class="text-[18px] text-normal-text">{{ item.date }}</span>
            <span class="text-[14px] text-grey">Version {{ item.version }}</span>
          </div>
        </template>
        <template #dot>
          <div class="circle-dot" />
        </template>
        <div flex flex-col mb-15 v-for="(data, index) in item.featDetail" :key="index">
          <div flex items-center>
            <img :src="newImg" alt="" />
            <span class="text-[18px] text-normal-text ml-10">{{ formatType(data.type) }}</span>
          </div>
          <div class="text-[10px] text-medium whitespace-pre-line leading-loose">
            {{ data.description }}
          </div>
        </div>
        <div flex flex-col mb-15 v-for="(data, index) in item.fixDetail" :key="index">
          <div flex items-center>
            <img :src="fixImg" alt="" />
            <span class="text-[18px] text-normal-text ml-10">{{ formatType(data.type) }}</span>
          </div>
          <div class="text-[10px] text-medium whitespace-pre-line leading-loose">
            {{ data.description }}
          </div>
        </div>
        <div flex flex-col mb-15 v-for="(data, index) in item.optDetail" :key="index">
          <div flex items-center>
            <img :src="optimizationImg" alt="" />
            <span class="text-[18px] text-normal-text ml-10">{{ formatType(data.type) }}</span>
          </div>
          <div class="text-[10px] text-medium whitespace-pre-line leading-loose">
            {{ data.description }}
          </div>
        </div>
      </a-timeline-item>
    </a-timeline>
  </div>
</template>

<style scoped lang="scss">
:deep(.ant-timeline .ant-timeline-item-tail) {
  position: absolute;
  inset-block-start: 10px;
  inset-inline-start: 4px;
  height: calc(100% - 10px);
  border-inline-start: 2px dashed var(--xy-primary-color);
  inset-inline-start: 40%;
}
:deep(.ant-timeline .ant-timeline-item-head-custom) {
  padding-block: 0px;
}
.circle-dot {
  width: 12px;
  height: 12px;
  position: relative;
  border: 2px solid var(--xy-primary-color);
  background-color: #fff;
  border-radius: 50%;
  box-sizing: border-box;

  &::after {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    content: '';
    width: 3px;
    height: 3px;
    background-color: var(--xy-primary-color);
    border-radius: 50%;
  }
}
:deep(.ant-timeline.ant-timeline-label .ant-timeline-item-label) {
  position: absolute;
  inset-block-start: -6px;
  width: 35%;
  text-align: end;
}
:deep(.ant-timeline.ant-timeline-label .ant-timeline-item-head-custom) {
  inset-inline-start: 40%;
}
:deep(.ant-timeline.ant-timeline-label .ant-timeline-item-left .ant-timeline-item-content) {
  inset-inline-start: calc(45% - 4px);
  width: calc(50% - 12px);
  text-align: start;
  vertical-align: middle;
}
:deep(.ant-timeline.ant-timeline-label:first-child) {
  .ant-timeline-item-head.ant-timeline-item-head-blue.ant-timeline-item-head-custom {
    margin-top: 18px;
  }
  .ant-timeline-item-tail {
    inset-block-start: 24px;
  }
}
:deep(.year-label::after) {
  position: absolute;
  content: '';
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  border-top: 5px solid var(--xy-primary-color);
  transform: translate(0, -50%);
  right: -20px;
  top: 50%;
  cursor: pointer;
}
.ant-timeline {
  transition: height 0.6s cubic-bezier(0.7, 0, 0.84, 0);
  height: auto;
}
:deep(.ant-timeline-item.ant-timeline-item-left.collapse) {
  min-height: 0;
  height: 0;
  padding: 0;
  overflow: hidden;
}
:deep(.ant-timeline-item.ant-timeline-item-left) {
  height: auto;
  transition: all 0.3s cubic-bezier(0.7, 0, 0.84, 0);
  min-height: 78px;
  // cursor: pointer;
}
:deep(.ant-timeline .ant-timeline-item-last > .ant-timeline-item-tail) {
  display: block;
}
:deep(.ant-timeline-item.ant-timeline-item-left + .ant-timeline-item.ant-timeline-item-left) {
  margin-top: 20px;
}
</style>
